<template>
  <div class="home">
    <h1>父组件信息，动态修改值，把值传入子组件中</h1>
    <input type="number" v-model="percentage" @input="inp" />
    <son :percentage="percentage" :color="colors"></son>
    <button @click="sub()">减油门</button>
    <button @click="add()">加油门</button>
  </div>
</template>

<script>
import Son from "../components/son.vue";

export default {
  name: "HomeView",
  components: {
    Son,
  },
  data() {
    return {
      percentage: 10,
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
    };
  },
  methods: {
    add() {
      this.percentage += 1;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    sub() {
      this.percentage -= 1;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    },
    inp() {
      if (this.percentage < 0) {
        this.percentage = 0;
      }
      if (this.percentage > 100) {
        this.percentage = 100;
      }
      if (this.percentage == "") {
        this.percentage = 0;
      }
    },
  },
};
</script>
